<template>
  <div style="font-size: 16px">
    <p>pageRouter: #/nextTick</p>
    <br />
    <p ref="msgP">{{ message }}</p>
    <br />
    <button @click="change">nextTick</button>
    <br /><br />
    <pre>
这是因为message数据在发现变化的时候，vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中

如果我们一直修改相同数据，异步操作队列还会进行去重

等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新</pre
    >
    <br />
    <hr />
    <a
      href="https://vue3js.cn/interview/vue/nexttick.html#%E4%B8%80%E3%80%81nexttick%E6%98%AF%E4%BB%80%E4%B9%88"
      target="_blank"
      rel="noopener noreferrer"
      >Vue中的$nextTick有什么作用</a
    >
  </div>
</template>
<script>
export default {
  name: 'nextTick',
  components: {},
  data() {
    return {
      message: '原始值'
    }
  },
  methods: {
    change() {
      this.message += 'test'
      // console.log(this.$el)
      // 这时候想获取页面最新的DOM节点，却发现获取到的是旧值
      console.log(this.$refs.msgP.innerText)
      // 这是因为message数据在发现变化的时候，vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中 如果我们一直修改相同数据，异步操作队列还会进行去重
      this.$nextTick(() => {
        console.log('下一次DOM更新：', this.$refs.msgP.innerText)
      })
    }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
